<template>
  <div id="app">
    <Header title="TabBar" bg="#fd1800" />
    <!-- 实现页面的动态切换 -->
    <!-- 接助component内置组件=>通过:is='变量(组件标签名)' -->
    <component :is="currentComponent" />
    <!-- <GoodList /> -->
    <TabBar :menus="menus" @change-page="changePage" />
  </div>
</template>

<script>
import Header from './views/Header.vue'
import TabBar from './views/TabBar.vue'
// 准备切换的页面
import Search from './views/Search.vue'
import GoodList from './views/GoodList.vue'
import User from './views/User.vue'

export default {
  name: 'App',
  components: {
    Header,
    TabBar,
    Search,
    GoodList,
    User
  },
  data () {
    return {
      // 当前显示的组件
      currentComponent: 'GoodList',
      // 菜单数据
      menus: [
        { id: 0, name: '首页', icon: 'icon-home', cp: 'GoodList' },
        { id: 1, name: '搜索', icon: 'icon-sousuo', cp: 'Search' },
        { id: 2, name: '我的', icon: 'icon-user', cp: 'User' }
      ]
    }
  },
  methods: {
    changePage (tagName) {
      this.currentComponent = tagName
    }
  }
}
</script>

<style lang="less">
#app {
  padding: 50px 0;
}
</style>
